
<template>
    <!-- 添加或修改配置对话框 -->
    <el-card class="card-body" style="overflow-y: auto;">
        <el-row :gutter="20" class="row-style">
            <el-col :span="24" class="left-layout">
                <el-form ref="managerRef" :model="form" :rules="rules" label-width="120px">
                    <el-row>
                                <el-col :span="24">
                                            <el-form-item label="主键" prop="id" v-if="false">
                                                <el-input v-model="form.id" placeholder="请输入主键" />
                                            </el-form-item>
                                </el-col>
                                <el-col :span="12">
                                            <el-form-item label="表名" prop="tableName" v-if="true">
                                                <el-input v-model="form.tableName" placeholder="请输入表名" />
                                            </el-form-item>
                                </el-col>
                                <el-col :span="12">
                                            <el-form-item label="驼峰表名" prop="camelTableName" v-if="true">
                                                <el-input v-model="form.camelTableName" placeholder="请输入驼峰表名" />
                                            </el-form-item>
                                </el-col>
                                <el-col :span="12">
                                            <el-form-item label="表注释" prop="tableTxt" v-if="true">
                                                <el-input v-model="form.tableTxt" placeholder="请输入表注释" />
                                            </el-form-item>
                                </el-col>
                                <el-col :span="12">
                                            <el-form-item label="表类型" prop="tableType" v-if="true">
                                                <el-select v-model="form.tableType" clearable filterable placeholder="请选择">
                                                    <el-option label="主表" value="1"/>
                                                    <el-option label="子表" value="2"/>
                                                </el-select>
                                            </el-form-item>
                                </el-col>
                                <el-col :span="12">
                                            <el-form-item label="表单地址" prop="formId" v-if="true">
                                                <el-input v-model="form.formId" placeholder="请输入表单地址" />
                                            </el-form-item>
                                </el-col>
                                <el-col :span="12">
                                            <el-form-item label="表单名称" prop="formName" v-if="true">
                                                <el-input v-model="form.formName" placeholder="请输入表单名称" />
                                            </el-form-item>
                                </el-col>
                                <el-col :span="24">
                                            <el-form-item label="表单json" prop="formJson" v-if="true">
                                                <el-input v-model="form.formJson" type="textarea" placeholder="请输入表单json" />
                                            </el-form-item>
                                </el-col>
                                <el-col :span="24">
                                            <el-form-item label="移动端表单json" prop="mobileFormJson" v-if="true">
                                                <el-input v-model="form.mobileFormJson" type="textarea" placeholder="请输入移动端表单json" />
                                            </el-form-item>
                                </el-col>
                    </el-row>
                </el-form>
                <el-tabs :tab-position="left" v-if="this.form.tableType==1?true:false">
                            <el-tab-pane label="子表配置">
                                <div>
                                <el-button @click="addSubTable" type="primary">增加</el-button>
                                </div>
                                <el-table :data="form.subTableList" style="width: 100%" height="200px">
                                    <el-table-column prop="subTableId" label="子表">
                                        <template #default="scope">
                                        <el-select v-model="scope.row.subTableId" filterable placeholder="请选择" @change="loadFields">
                                            <el-option
                                            v-for="item in subTableOptions"
                                            :key="item.id"
                                            :label="item.tableName"
                                            :value="item.id">
                                            </el-option>
                                        </el-select>
                                        </template>
                                    </el-table-column>
                                    <el-table-column prop="subField" label="关联字段">
                                        <template #default="scope">
                                            <el-select v-model="scope.row.subField" filterable placeholder="请选择" >
                                                <el-option
                                                v-for="item in subFieldOptions"
                                                :key="item.fieldName"
                                                :label="item.fieldName"
                                                :value="item.fieldName">
                                                </el-option>
                                            </el-select>
                                        </template>
                                    </el-table-column>
                                    <el-table-column prop="relationType" label="关联类型">
                                        <template #default="scope">
                                            <el-radio-group v-model="scope.row.relationType">
                                                <el-radio label="1">1对1</el-radio>
                                                <el-radio label="2">1对多</el-radio>
                                            </el-radio-group>
                                        </template>
                                    </el-table-column>
                                    <el-table-column prop="orderNum" label="排序号">
                                        <template #default="scope">
                                        <el-input v-model="scope.row.orderNum"/>
                                        </template>
                                    </el-table-column>
                                    <el-table-column fixed="right" label="操作" width="160">
                                        <template #default="scope">
                                        <el-button type="text" size="default" @click="delSubTable(scope.$index)">删除</el-button>
                                        </template>
                                    </el-table-column>
                                </el-table>
                            </el-tab-pane>
                        </el-tabs>
                <div class="dialog-footer">
                    <el-button @click="cancel">取 消</el-button>
                    <el-button type="primary" @click="submitForm" v-if="isShow">确 定</el-button>
                </div>
            </el-col>
        </el-row>
    </el-card>
</template>

<script>
    //API接口
    import api from '@/api'
    //引入消息弹出框
    import { ElMessage, ElMessageBox } from 'element-plus'
    //上传组件
    import Upload from '@/components/FileUpload/index.vue'
    //富文本组件
    import Editor from '@/components/Editor/index.vue'

    export default {
        components: { Upload, Editor
        },
        props: {
            save:{
                type: Function,
                default: (e,obj) => {
                    obj.$router.go(-1)
                }
            },
            formList: {
                type: Object,
                default() {
                    return {}
                },
            },
        },
        data() {
            return {
                isType:'',
                //表单验证
                form: {
                    subTableList:[]
                },
                isShow:true,
                subTableOptions:[],
                subFieldOptions:[],
                rules: {
                    // formId:[
                    //    {
                    //         required: true,
                    //         message: "表单地址不能为空",
                    //         trigger: "blur"
                    //     }
                    // ],
                    tableName:[
                       {
                            required: true,
                            message: "表名不能为空",
                            trigger: "blur"
                        }
                    ],
                    tableTxt:[
                       {
                            required: true,
                            message: "表注释不能为空",
                            trigger: "blur"
                        }
                    ],
                    camelTableName:[
                       {
                            required: true,
                            message: "驼峰命名不能为空",
                            trigger: "blur"
                        }
                    ],
                },
                
            }
        },
        /**
         * 挂载函数
         */
        mounted() {
            //根据状态判断是否请求详情接口
            this.isType = this.formList.type?this.formList.type:this.$route.query.isType;
            if (this.isType === "edit" || this.isType === "details") {
                //编辑以及详情通过路由跳转传参
                let editid = this.formList.id?this.formList.id:this.$route.query.id;
                //如果事项请页面隐藏提交按钮
                if (this.$route.query.type) {
                    this.isShow = false;
                }
                if(this.formList.instanceId){
                    // 组件时的判断instanceId请求详情接口表单回显数据
                    api.sysFormTable.list({instanceId: this.formList.instanceId}).then(res => {
                        let data = res.rows.length?res.rows[0]:{}
                        this.form = data;
                    });
                }else{
                    // 跳转链接时请求详情接口表单回显数据
                    api.sysFormTable.editId(editid).then(res => {
                        if (res.data) {
                            this.form = res.data;
                        }
                    });
                }
            }
            this.loadTables();

        },
        methods: {


            /** 提交按钮 */
            submitForm() {
                this.$refs['managerRef'].validate(valid => {
                    Object.keys(this.formList).map((key) => {
                        if(this.isType){
                            if(key!='id'){
                                this.form[key] = this.formList[key]
                            }
                        }else{
                            this.form[key] = this.formList[key]
                        }
                    })
                    if (valid) {
                        if (this.isType&&this.form.id) {
                            api.sysFormTable
                                .edit(this.form)
                                .then(res => {
                                    this.save(res,this);
                                    this.$message.success(res.msg)
                                })
                                .catch(err => {
                                    this.$message.error(err.msg)
                                })
                        } else {
                            api.sysFormTable
                                .add(this.form)
                                .then(res => {
                                    this.save(res,this);
                                    this.$message.success(res.msg)
                                })
                                .catch(err => {
                                    this.$message.error(err.msg)
                                })
                        }
                    }
                })
            },
            /** 更新流程实例、流程状态 */
            /** 取消按钮 */
            cancel() {
                this.$router.go(-1);
            },
            addSubTable(){
                const row = {
                subTableId: "",
                subField: "",
                relationType: "",
                orderNum: "",
                };
                this.form.subTableList = this.form.subTableList?[...this.form.subTableList,{...row}]:[{...row}];
            },
            delSubTable(index) {
                this.form.subTableList.splice(index, 1);
            },
            /** 加载子表 */
            loadTables() {
                api.sysFormTable.list({tableType:"2"})
                                .then(res => {
                                    this.subTableOptions = res.rows;
                                })
                            
            },
            /** 加载字段 */
            loadFields(id) {
                api.sysFormField.list({tableId:id})
                                .then(res => {
                                    this.subFieldOptions = res.rows;
                                })
            }
        },
    }
</script>

<style lang="less" scoped>
    :deep(.el-tabs__nav-scroll) {
        padding: 0 20px;
    }
    :deep(.el-tabs__content) {
        height: 560px;
        overflow-y: scroll;
    }
</style>
